<template>
	<view>
		<uni-titles :title="'管地基'"></uni-titles>
		<uni-onlytitlelist :title="'土地信息'"  >
			<view class="gtudbox">
				<view class="item fs-24" v-for="(d, index) in tdData" :key="d.name">
					<view class="name">
						<view>{{ d.name }}</view>
					</view>
					<view class="mar-left20 rightcontent" :class="'rightcontent' + index">
						<view>{{ d.value }}</view>
						<view v-if="index == 1" class="rightchange">
							<u-icon :name="changeIcon" color="#07C160" size="13"></u-icon>
							<text class="mar-left6">切换</text>
						</view>
						<view v-if="d.type == 1 && index == 3" class="mar-left20" :class="'type' + index">幼苗期</view>
					</view>
				</view>
			</view>
		</uni-onlytitlelist>
		<uni-propelling :propellingdata="data"></uni-propelling>
		<uni-onlytitlelist :title="'田块信息'"  >
			<view class="item" v-for="(d, index) in farmlist" :key="d.text3">
				<u--image :mode="'aspectFill'" :src="d.img" width="100rpx" height="100rpx"></u--image>
				<view class="rightcontent">
					<view class="fs-24 title">
						<view class="textbox">
							<text class="text">{{ d.text1 }}块</text>
							<text class="text">{{ d.text2 }}亩</text>
							<text class="text">{{ d.text3 }}</text>
							<text class="text">{{ d.text4 }}</text>
						</view>
						<view class="startBtn" @click="_click(d, 1)"><u-button text="改种植" color="#8DD16B"></u-button></view>
					</view>
				</view>
			</view>
		</uni-onlytitlelist>
		<uni-onlytitlelist :title="'农场人员'"  >
			<view class="item" v-for="(d, index) in renlist" :key="d.img">
				<u--image :mode="'aspectFill'" :src="d.img" width="100rpx" height="100rpx"></u--image>
				<view class="rightcontent">
					<view class="fs-24 title">
						<view class="textbox">
							<text class="text">{{ d.text1 }}人</text>
							<text class="text">{{ d.text2 }}人</text>
							<text class="text">{{ d.text3 }}</text>
							<text class="text">{{ d.text4 }}</text>
						</view>
						<view class="startBtn" @click="_click(d, 2)"><u-button text="人员编辑" color="#8DD16B"></u-button></view>
					</view>
				</view>
			</view>
		</uni-onlytitlelist>
		<uni-onlytitlelist :title="'地块物联设备'"  >
			<view class="item" v-for="(d, index) in seblist" :key="d.img">
				<u--image :mode="'aspectFill'" :src="d.img" width="100rpx" height="100rpx"></u--image>
				<view class="rightcontent">
					<view class="fs-24 title">
						<view class="textbox">
							<view class="text">{{ d.text1 }}个</view>
							<view class="text">{{ d.text2 }}</view>
							<view class="text text3">{{ d.text3 }}</view>
						</view>
						<view class="startBtn" @click="_click(d, 3)"><u-button text="设备编辑" color="#8DD16B"></u-button></view>
					</view>
				</view>
			</view>
		</uni-onlytitlelist>
		<uni-lastbtn :text="'删除地基'" @btnfun="btnfun" :bgColor="'#FF9211'"></uni-lastbtn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				propellingImg:
					'',
				hotText: '新',
				text: '您有 5条 该地块的待办事宜，请尽快阅读，安排待办事宜'
			},
			changeIcon:
				'',
			tdData: [
				{ name: '土地名称', value: '天府广场后花园' },
				{ name: '地块位置', value: '成都市金牛区科华北路3号' },
				{ name: '地块类型', value: '果园' },
				{ name: '种植作物', value: '番茄', type: 1 }
			],
			farmlist: [
				{
					text1: '1',
					text2: '123.2',
					text3: '西红柿地',
					text4: '种植面积',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '1',
					text2: '123.2',
					text3: '西红柿地',
					text4: '种植面积',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '1',
					text2: '123.2',
					text3: '西红柿地',
					text4: '种植面积',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				}
			],
			renlist: [
				{
					text1: '1',
					text2: '5',
					text3: '农场主',
					text4: '工作人员',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '1',
					text2: '5',
					text3: '农场主',
					text4: '工作人员',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '1',
					text2: '5',
					text3: '农场主',
					text4: '工作人员',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				}
			],
			seblist: [
				{
					text1: '3',
					text2: '摄像设备',
					text3: '用于高新区种植基地大门摄像监控',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '3',
					text2: '摄像设备',
					text3: '用于天府广场一号种植基地大门摄像监控',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					text1: '3',
					text2: '摄像设备',
					text3: '用于天府广场一号种植基地大门摄像监控',
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				}
			]
		};
	},
	methods: {
		btnfun(d) {
			uni.showToast({
				title: d,
				icon: 'none'
			});
		},
		_click(d, num) {
			let url = '';
			if (num == 1) {
				url = '/subpkg/foundation/zwxg';
			} else if (num == 2) {
				url = '/subpkg/foundation/ryxg';
			} else if (num == 3) {
				url = '/subpkg/foundation/sbxg';
			}
			uni.navigateTo({
				url:url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}

.gtudbox {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	.item {
		display: flex;
		// width: 50%;
		padding: 12rpx 0;
		.name {
			width: 100rpx;
		}

		.type3 {
			color: #13b3ee;
			background: #eaf9ff;
			border: 1px solid #10b9ff;
			border-radius: 8rpx;
			padding: 0 10rpx;
		}
	}
	.rightcontent {
		display: flex;
		// 	.rightchange{
		// 	}
	}
	.rightcontent1 {
		flex: 1;
		justify-content: space-between;

		.rightchange {
			display: flex;
			align-items: center;
			color: #07c160;
		}
	}
}
.item {
	display: flex;
	background: #fff;
	margin-top: 20rpx;
	padding: 14rpx 0rpx 16rpx;
	border-radius: 8rpx;
	.rightcontent {
		flex: 1;
		margin-left: 16rpx;
		align-items: center;
		// justify-content: space-between;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.textbox {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				.text {
					width: 40%;
					text-align: center;
					padding: 8rpx 0;
					box-sizing: border-box;
				}
				.text3 {
					width: 80%;
					text-align: left;
				}
			}
			.startBtn {
				width: 180rpx;
			}
		}
	}
}
</style>
